<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>提交定制</title>
    @include('index.css')
</head>
<body>
<div id="wrap" class="flexv">
    <div id="header" class="flex centerv header">
        <a href="javascript:window.history.back();" class="flex center bc bc-back icon"></a>
        <div class="flexitem center title">提交定制</div>
        <a href="tel:" class="flex center txt">客服</a>
    </div>
    <div id="main" class="flexitemv">
        <form action="{:U('addIndent')}" id="order" onsubmit="return false">
            <div class="pics">
                <div class="flex center tabs">
                    <a href="javascript:;" class="flex center current">名片正面</a>
                    <a href="javascript:;" class="flex center">名片反面</a>
                </div>
                <div class="outerbox">
                    <div class="roll">
                        @foreach($list->template as $value)
                        <div class="pic"><a href="javascript:;"><img src="{{$value->effect_src}}" /></a></div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="buytip" style="padding: 10px 10px 5px; font-size: 0.9em; color: #f00;">名片模板样式固定，只能根据您提供信息修改联系方式，不能修改样式，请悉知！</div>
            <div class="block">
                <div class="flex centerv row">
                    <span class="flexitem">材质</span>
                    <em class="flex">300g铜纸质双面覆膜</em>
                </div>
                <div class="flex centerv row">
                    <span class="flexitem">模板名称</span>
                    <em class="flex">{{$list->card_name}}</em>
                </div>
                <div class="flex centerv row">
                    <span class="flexitem">模板编号</span>
                    <em class="flex">{{$list->number}}</em>
                </div>
                <div class="flex centerv row">
                    <span class="flexitem">单价</span>
                    <em class="flex notice">&yen;{{$list->price}}/500张</em>
                </div>
                <div class="flex centerv row">
                    <span class="flexitem">定制数量</span>
                    <div class="flex numbers">
                        @for($i=1;$i<4;$i++)
                            <a href="javascript:;" class="flex center" data-step="{{$i}}" data-price="{{$list['price'] * $i}}">{{$i*500}}张</a>
                        @endfor
                    </div>
                </div>
                <div class="flex centerv row">
                    <span class="flex">您的手机</span>
                    <input type="tel" name="phone" placeholder="请填写您的手机号码" class="flexitem text" data-rule="m" data-errmsg="手机号码格式错误" />
                </div>
                <div class="flex centerv row">
                    <span class="flex">您的姓名</span>
                    <input type="text" name="cname" placeholder="请填写您的姓名" class="flexitem text" data-rule="cname" data-errmsg="姓名格式错误" />
                </div>
                <div class="flex centerv row">
                    <span class="flex">您的微信</span>
                    <input type="text" name="wechat" placeholder="请填写您的微信号" class="flexitem text" data-rule="*" data-errmsg="请填写您的微信号" />
                </div>
                <div class="flex centerv row">
                    <span class="flex">配送至</span>
                    <div class="flexitem select">
                        <em class="flexitem" style="visibility:hidden;" id="postage">{{env('POSTAGE_AREA')}}</em>
                        <select name="area" class="flex postage" data-rule="*" data-errmsg="请选择配送省份">
                            <option value="">请选择</option>
                            @foreach($province as $value)
                                <option value="{{$value}}">{{$value}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="flex centerv row">
                    <span class="flexitem">配送费用</span>
                    <em class="flex" id="toofar">包邮</em>
                    <input type="hidden" name="freight" value="0" />
                </div>
            </div>
            <div class="flex center tips">提交定制后，请确保您的手机号码正确，保持电话畅通，方便客服24小时之内联系！<br/>客服热线：{{env('CUSTOM_SERVICE')}}<br/>订单快递查询：{{env('TRANSPORT_PHONE')}}</div>
            <input type="hidden" name="ctid" value="{$list.id}" />
            <input type="hidden" name="num" value="" data-rule="*" data-errmsg="请选择定制数量" />
            <input type="hidden" name="name" value="{$list.card_name}" />
            <input type="hidden" name="title" value="购买{$list.card_name}名片" />
        </form>
    </div>
    <div class="flex footer" id="tabbar">
        <div class="flexitemv counter">
            <!--<input type="hidden" name="num" value="1" />-->
            <p class="flex centerv endh"><em>共计：</em><span>0张</span></p>
            <h2 class="flex centerv endh"><em>合计：</em><i>&yen;</i><span>0.00</span></h2>
        </div>
        <a href="javascript:;" class="flex center submit">提交定制</a>
    </div>
</div>
<js href="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js" />
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script src="{{asset('js/index/checkform.js')}}"></script>
<script src="{{asset('js/index/functions.js')}}"></script>
<script type="text/javascript">
    $('.tabs a').click(function (){
        if($(this).hasClass('current')) return;
        $(this).addClass('current').siblings().removeClass('current');
        var index = $(this).index(),ih = $('.roll').height() / 2;
        $('.roll').css({
            'transform' : 'translateY(' + (-ih * index) + 'px)',
            '-webkit-transform' : 'translateY(' + (-ih * index) + 'px)'
        });
    });

    $('.numbers a').click(function (){
        if($(this).hasClass('current')) return false;
        $(this).addClass('current').siblings().removeClass('current');
        setAmount();
    });

    /**
     *
     */
    function setAmount (){
        var total = 0,num = '',amount = 0,txt = '0张',post = '包邮';
        if($('.numbers .current').size() > 0){
            txt = $('.numbers .current').text();
            num = $('.numbers .current').attr('data-step');
            amount = Number($('.numbers .current').attr('data-price'));
        }
        var price = num ? num * 10 : 10;
        var freight = parseInt($('input[name=freight]').val());
        if(freight > 0){
            post = '邮费:&yen;' + price.toFixed(2);
            $('input[name=freight]').val(price);
            freight = price;
            $('#toofar').html('偏远地区需要加收邮费 &yen;' + price.toFixed(2)).css({'color':'#f00','font-size':'0.9em'});
        }
        total = amount + freight;
        $('#tabbar .counter p span').html(txt + ' ' + post);
        $('#tabbar .counter h2 span').text(total.toFixed(2));
        $('input[name=num]').val(num);
    }

    /**
     * 邮费计算
     */
    var postage = $('#postage').text();
    $('.postage').change(function (){
        var val = $(this).val(),num = 0;
        if($('.numbers .current').size() > 0) num = $('.numbers .current').attr('data-step');
        var price = num ? num * 10 : 10;
        if(postage.indexOf(val) > -1){
            $('input[name=freight]').val(price);
        }else{
            $('#toofar').html('包邮').removeAttr('style');
            $('input[name=freight]').val(0);
        }
        setAmount();
    });

    new checkForm({
        form : '#order',
        btn : '.submit',
        error : function (ele,err){showMsg(err);},
        complete : function (ele){
            var url = $(ele).attr('action'),post = $(ele).serializeArray();
            showProgress('订单提交中');
            $.post(url,post,function (ret){
                showMsg(ret.info,ret.status);
                if(ret.status == 1 && ret.url) setTimeout(function (){window.location.href = ret.url;},1000);
            },'json');
        }
    });
</script>
</body>
</html>